<template>
  <div id="toast" class="toast" v-if="computedValue">
    {{this.$store.state.toast.msg}}
  </div>
</template>

<script>
export default {
  computed: {
    computedValue: {
      get() {
        return this.$store.state.toast.value;
      },
      set(value) {
        this.$store.dispatch('toast', {
          value,
        }); 
      }
    },
  },
  watch: {
    computedValue(value) {
      if (value) {
        setTimeout(() => {
          this.$store.dispatch('toast', {
            value: false,
          });
        }, this.$store.state.toast.time);
      }
    }
  }
};
</script>

<style lang="less">
.toast {
  position: fixed;
  left: 50%;
  top: 50%;
  background-color: rgba(0, 0, 0, .5);
  color: #fff;
  transform: translate(-50%, -50%);
  padding: 8px 10px;
  border-radius: 4px;
}
</style>
